<template>
  <input
    @input="sendFn"
    v-bind:value="value"
    class="hm-input"
    type="text"
    @blur="blurFn"
    :[attr]="{ success: isOk, err: !isOk }"
  />
</template>
// blur:表单元素失去焦点事件
<script>
export default {
  props: {
    value: String,
    reg: {
      type: RegExp, //表示传入的reg必须是正则表达式
      default: () => {
        //   这个正则表示内容不能为空
        return /^.{1,}/;
      },
    },
  },
  data() {
    return {
      // 声明一个对象用于赋值布尔值,方便添加动态class
      isOk: true,
      // 声明一个变量用于判定是否需要使用动态class,attr:class
      attr: "",
    };
  },
  methods: {
    // 失去焦点事件,用正则表达式验证输入的值是否符合要求
    blurFn() {
      this.attr = "class";
      // 手机正则表达式,用于判断用户输入的手机号码是否正确
      if (this.reg.test(this.value)) {
        this.isOk = true;
      } else {
        this.isOk = false;
        // 输入错误时提示框
        this.$toast.fail("输入内容不合法！");
      }
    },
    // 绑定输入框的input事件,实时传递输入框的内容给父组件
    sendFn(e) {
      // 事件对象拿到输入框的内容
      this.$emit("input", e.target.value);
    },
  },
};
</script>

<style lang="less" scoped>
.hm-input {
  color: #666;
  border: none;
  border-bottom: 2px solid #666;
  width: 100%;
  padding: 10px 0;
  line-height: 25px;
  font-size: 15px;
}
// 成功样式
.success {
  border-bottom-color: green;
  color: green;
}
// 失败样式
.err {
  border-bottom-color: red;
  color: red;
}
</style>